<template>
  <div id='tmpl'>
      <ul class="account">
          <li v-for="(item,index) in list" :key="index">
              <mt-switch v-model="value[index]" class="switch"></mt-switch>
              <img :src="item.thumb_path" alt="">
              <div class="right">
                  <h4>{{item.title}}</h4>
                   <div>
                       ￥{{item.sell_price}}
                        <carInput class="carInput" @dataObj="getCount" :initCount="item.cou" :goodId="item.id"></carInput> <!-- 注意子传父方法绑定用v-on:或@  -->
                   </div>
                   <div class="del"><a href="javascript:;">删除</a> </div>   
              </div>
          </li>
      </ul>
      <div id="total">
			<div class="desc">
				<ul>
					<li>总计（不含运费）</li>
					<li>已勾选商品{{totalAccount}}件,总价:￥{{totalAmount}}元</li>
				</ul>
			</div>
			<div id="button">
				<mt-button  type="danger" size="small">去结算</mt-button>
			</div>
		</div>
  </div>
</template>
<script>
import { getgoodsObj,updataObj } from "../../kits/localrg.js";
import {Toast} from "mint-ui";
import carInput from "./carInput.vue";
export default {
  computed:{
    totalAccount(){
      //计算this.value的true值
      var tuerArr=this.value.filter(function(item){ //数组的过滤方法，过滤每一项，返回真的项的数组
        return item;
      })
      var amout=0;
      this.value.forEach((item,index)=>{
        if(item){
          var count=this.list[index].cou;
          var price=this.list[index].sell_price;
          var itemAmount=count*price;
              amout+=itemAmount;
        }
      })
      this.totalAmount=amout;
      return tuerArr.length;
    }
  },
  components:{
    carInput
  },
  name: "component_name",
  data() {
    return {
      value: [],
      list: [],
      totalAmount:0
    };
  },
  created() {
    this.getdataList();
  },
  methods: {
    getdataList() {
      var obj = getgoodsObj();
      var idstring = "";
      for (var k in obj) {
        idstring += k + ","; //这步处理后最后会有一个逗号
      }
      idstring = idstring.substring(0, idstring.length - 1);
      var url = `${this.$common
        .apidomain}/api/goods/getshopcarlist/${idstring}`;
      this.$http.get(url).then(res => {
           console.log(res)
        if (res.body.status != 0) {
          Toast(res.body.message);
          return;
        }
        res.body.message.forEach((item)=>{
            item.cou = obj[item.id] //由于我们的到数据cou是占位具体值还得从localStorage里取
        })
        this.list=res.body.message;
      });
    },
    getCount(resobj){
      //  console.log(input);
      //更新localStorage里的数据的方法
      updataObj(resobj);
      //也要更新getdatalist即car.vue的当前数量
      for(var i=0; i<this.list.length; i++){
        if(this.list[i].id==resobj.goodId){
          if(resobj.type="add"){
            this.list[i].cou= this.list[i]+1;
          
          }
          else{
          this.list[i].cou= this.list[i]-1;
        }
        }
        break;
      }
    }
  }
};
</script>
<style lang="css" scoped>
.account {
  padding: 0;
}
.account li {
  border-bottom: 1px solid #0094ff;
  display: flex;
}
.account li img {
  margin-left: 5px;
  width: 75px;
  height: 80px;
  background-color: red;
  flex: 0 0 85px; /* 相当于可以让块元素放同一行,并定义宽度 */
}
.switch {
  display: 0 0 52px;
}
.account .right {
  margin-left: 5px;
}
.account .right h4 {
  color: #0094ff;
  font-size: 14px;
}
.carInput{
  display: inline-block;
}
.del{
  padding-right: 5px;
}
.del a{
  display: block;
  text-align: right;
}
	#total{
		height: 100px;
		background-color: rgba(0,0,0,0.1);
		display: flex;
		padding: 5px;;
	}

	#total ul {
	 padding-left: 0px;
	}
	#total li{
		list-style: none;
		font-size: 14px;
	}

	#button{
		flex:0 0 60px;
		margin: 30px 0 0 0 ;
	}

	.desc{

		flex:1;
	}
</style>